<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <meta name="geometry" content="polygon">
  <link rel="stylesheet" href="./assets/common.css">
  <title>Treemap Tiles</title>
</head>

<body>
  <div class="toolbar" style="text-align: center;">
    <label for="tile">Select Tile: </label>
    <select name="tile" id="tile">
      <option value="treemapBinary">treemapBinary</option>
      <option value="treemapDice">treemapDice</option>
      <option value="treemapResquarify">treemapResquarify</option>
      <option value="treemapSlice">treemapSlice</option>
      <option value="treemapSliceDice">treemapSliceDice</option>
      <option value="treemapSquarify">treemapSquarify</option>
    </select>
  </div>
  <div id="canvas"></div>
  <script src="./assets/lodash-4.17.4.min.js"></script>
  <script src="./assets/jquery-3.2.1.min.js"></script>
  <script src="./assets/data-set.min.js"></script>
  <script src="../build/g2.js"></script>
  <script>
    const data = {
      name: '1',
      children: [
        {
          name: '1.1',
          children: [
            {
              name: '1.1.1',
              size: 100
            },
            {
              name: '1.1.2',
              size: 300
            },
            {
              name: '1.1.3',
              children: [
                {
                  name: '1.1.3.1',
                  size: 200
                },
                {
                  name: '1.1.3.2',
                  size: 200
                },
                {
                  name: '1.1.3.3',
                  size: 400
                }
              ]
            }
          ]
        },
        {
          name: '1.2',
          size: 300
        }
      ]
    };

    const $tile = $('#tile');

    const ds = new DataSet();
    ds.state.treemapTile = $tile.val();
    const dv = ds.createView('demo')
      .source(data, {
        type: 'hierarchy'
      })
      .transform({
        field: 'size',
        type: 'hierarchy.treemap',
        tile: '$state.treemapTile',
        as: [ 'x', 'y' ]
      });

    const chart = new G2.Chart({
      container: 'canvas',
      forceFit: true,
      height: window.innerHeight,
      padding: 0
    });

    function rerender() {
      chart.clear();
      chart.source(
        _.map(dv.getAllNodes(), node => {
          node.name = node.data.name;
          node.size = node.data.size;
          return node;
        })
      );
      chart.scale({
        size: {
          nice: false
        }
      });
      chart.axis(false);
      chart.legend(false);
      chart.polygon()
        .position('x*y')
        .color('name')
        .label('name');
      chart.render();
    }

    ds.on('statechange', rerender);

    $tile.on('change', () => {
      ds.setState('treemapTile', $tile.val());
    });

    rerender();
  </script>
</body>

</html>
